@extends('layouts.app')

@section('title')

@section('styles')
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- Google Webfont -->
    <!--<link href='http://fonts.useso.com/css?family=Lato:300,400|Crimson+Text' rel='stylesheet' type='text/css'>-->
    <!-- Themify Icons -->
    <link rel="stylesheet" href="/static/css/themify-icons.css" />
    <!-- Bootstrap -->
    <link rel="stylesheet" href="/static/css/bootstrap.css" />
    <!-- Owl Carousel -->
    <link rel="stylesheet" href="/static/css/owl.carousel.min.css" />
    <link rel="stylesheet" href="/static/css/owl.theme.default.min.css" />
    <!-- Magnific Popup -->
    <link rel="stylesheet" href="/static/css/magnific-popup.css" />
    <!-- Superfish -->
    <link rel="stylesheet" href="/static/css/superfish.css" />
    <!-- Easy Responsive Tabs -->
    <link rel="stylesheet" href="/static/css/easy-responsive-tabs.css" />
    <link rel="stylesheet" href="/static/css/course_style.css" />
    <!-- jQuery -->
    <script src="/static/js/jquery-1.10.2.min.js"></script>
    <!-- Theme Style -->
    <link rel="stylesheet" href="/static/css/style.css" />
@stop

@section('content')

    <style>
        #fh5co-header-section{
            position: static!important;
            background: #fffff5;
        }
        #site-nav{
            display: flex!important;
            margin: 0 auto!important;
            height: 30px!important;
            width: 1170px!important;
            padding:0 50px 0 22px!important;
        }
        #site-nav a{
            color: #28bbf8;
            font-size: 12px;
        }
        .ml-auto {
            margin-left: auto!important;
        }
        #fh5co-primary-menu li>a{
            color: #777777;
        }
        #buyButton .add{
            color: #fff!important;
            font-size: 16px;
            line-height: 38px;
            background: #f40!important;
            border: 1px solid #f40!important;
            border-radius: 2px;
            cursor: pointer!important;
        }
    </style>
    <div class="" style="height:100px;"></div>

    <link href="/product/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" charset="utf-8" src="/product/jquery.jqzoom.js"></script>
    <script type="text/javascript" charset="utf-8" src="/product/common.js"></script>
    <script type="text/javascript" charset="utf-8" src="/product/picture.js"></script>
    <script type="text/javascript" charset="utf-8" src="/product/cart.js"></script>
    <script type="text/javascript">
        $(function() {
            //TAB切换
            tabs('#goodsTabs', 'click');
            //智能浮动层
            $("#tabHead").smartFloat();
            //初始化规格事件
            //initGoodsSpec('/tools/submit_ajax.ashx?action=get_article_goods_info');
        });
    </script>

    <script type="text/javascript" src="/templates/main/js/ecmoban_common.js"></script>

    <!--/Header-->
    <div class="section clearfix">
        <div class="main-wrap">
            <!--页面左边-->
            <div class="left941">
                <!--商品图片-->
                <div class="goods-pic">
                    <!--幻灯片-->
                    <div class="pic-box">
                        <div class="pic-preview">
                                <span class="jqzoom">
                                    <img /></span>
                        </div>
                        <!--缩略图-->
                        <div class="pic-scroll">
                            <a class="prev">&lt;</a>
                            <a class="next">&gt;</a>
                            <div class="items">
                                <ul>
                                    <li>
                                        <img bimg="{{ env('APP_URL') . '/uploads/' . $products->image }}" src="{{ env('APP_URL') . '/uploads/' . $products->image }}" onmousemove="preview(this);" /></li>
                                </ul>
                            </div>
                        </div>
                        <!--缩略图--></div>
                    <!--/幻灯片--></div>
                <!--/商品图片-->
                <!--商品信息-->
                <div class="goods-spec">
                    <script type="text/javascript" src="/tools/submit_ajax.ashx?action=view_article_click&amp;id=108&amp;click=1&amp;hide=1"></script>
                    <h1>易快得 趋势分析系统</h1>
                    <p class="subtitle">易快得 趋势分析系统</p>
                    <div class="spec-box">
                        <!--dl>
                        <dt>货号</dt>
                        <dd id="commodityGoodsNo"></dd></!--dl>-->
                        <dl>
                            <dt>市场价</dt>
                            <dd>
                                <s id="commodityMarketPrice">&yen;{{ $products->price }}</s></dd>
                        </dl>
                        <dl>
                            <dt>销售价</dt>
                            <dd>
                                <em id="commoditySellPrice" class="price">&yen;{{ $products->price }}</em></dd>
                        </dl>
                    </div>
                    <div id="goodsSpecBox" class="spec-box line">
                        <!--商品规格-->
                        <dl>
                            <dt>使用期限</dt>
                            <dd>
                                <ul class="items">
                                    <!--规格选项-->
                                    @foreach($products->skus as $sku)
                                    <label
                                        class="btn sku-btn"
                                        data-price="{{ $sku->price }}"
                                        data-stock="{{ $sku->stock }}"
                                        data-toggle="tooltip"
                                        title="{{ $sku->description }}"
                                        data-placement="bottom">
                                        <input type="radio" name="skus" value="{{ $sku->id }}"> {{ $sku->title }}
                                    </label>
                                    @endforeach
                                    <!--/规格选项-->
                                </ul>
                            </dd>
                        </dl>
                        <script>
                            $(document).ready(function () {
                                $('.sku-btn').click(function () {
                                    $('#commodityMarketPrice').text($(this).data('price'));
                                    $('#commoditySellPrice').text($(this).data('price'));
                                    $('#commodityStockNum').text($(this).data('stock'));
                                });
                            });
                        </script>
                        <!--/商品规格--></div>
                    <div class="spec-box">
                        <dl>
                            <dt>购买数量</dt>
                            <dd>
                                <div class="stock-box">
                                    <input id="commodityArticleId" type="hidden" value="108" />
                                    <input id="commodityGoodsId" type="hidden" value="0" />
                                    <input id="commoditySelectNum" type="text" maxlength="9" value="1"
                                           readonly="readonly" maxvalue="37711" onkeydown="return checkNumber(event);" />
                                    <a class="add" onclick="addCartNum(1);">+</a>
                                    <a class="remove" onclick="addCartNum(-1);">-</a></div>
                                <span class="stock-txt">可购买
                                        <em id="commodityStockNum">37711</em>件</span></dd>
                        </dl>
                        <dl>
                            <dd>
                                <div id="buyButton" class="btn-buy">
                                    <button class="add over" >立即购买</button>
{{--                                    <button class="add over" onclick="cartAdd(this,'/',0,'/cart.aspx');" disabled="disabled">加入购物车</button>--}}
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
                <!--商品信息-->
                <div class="line20"></div>
                <!--商品介绍-->
                <div id="goodsTabs" class="goods-tab">
                    <!--选项卡-->
                    <div id="tabHead" class="tab-head">
                        <ul>
                            <li>
                                <a class="selected" href="javascript:;">商品介绍</a>
                            </li>
{{--                            <li>--}}
{{--                                <a href="javascript:;">商品评论</a>--}}
{{--                            </li>--}}
                        </ul>
                    </div>
                    <!--/选项卡-->
                    <!--选项内容-->
                    <div class="tab-content entry" style="display:block">
                        {!! $products->description !!}
                    </div>
{{--                    <div class="tab-content">--}}
{{--                        <!--用户评论-->--}}
{{--                        <!--取得评论总数-->--}}
{{--                        <script type="text/javascript">$(function() {--}}
{{--                                //初始化评论列表--}}
{{--                                pageInitComment();--}}
{{--                                //初始化发表评论表单--}}
{{--                                AjaxInitForm('#comment_form', '#btnSubmit', 1, '', pageInitComment);--}}
{{--                            });--}}
{{--                            //初始化评论列表--}}
{{--                            function pageInitComment() {--}}
{{--                                AjaxPageList('#comment_list', '#pagination', 10, 0, '/tools/submit_ajax.ashx?action=comment_list&article_id=108', '/templates/main/images/user-avatar.png');--}}
{{--                            }</script>--}}
{{--                        <div class="comment-add">--}}
{{--                            <form id="comment_form" name="comment_form" url="/tools/submit_ajax.ashx?action=comment_add&amp;article_id=108">--}}
{{--                                <div class="editor">--}}
{{--                                    <textarea id="txtContent" name="txtContent" class="input" datatype="*" sucmsg=" "></textarea>--}}
{{--                                </div>--}}
{{--                                <div class="subcon">--}}
{{--                                    <input id="btnSubmit" name="submit" class="btn right" type="submit" value="提交评论（Ctrl+Enter）" />--}}
{{--                                    <span>验证码：</span>--}}
{{--                                    <input id="txtCode" name="txtCode" type="text" class="input small" datatype="s4-4" errormsg="请填写4位验证码" sucmsg=" " onkeydown="if(event.ctrlKey&amp;&amp;event.keyCode==13){document.getElementById('btnSubmit').click();return false};" />--}}
{{--                                    <a href="javascript:;" onclick="ToggleCode(this, '/tools/verify_code.ashx');return false;">--}}
{{--                                        <img src="/tools/verify_code.ashx" width="80" height="22" style="vertical-align:middle;" />看不清楚？</a></div>--}}
{{--                            </form>--}}
{{--                        </div>--}}
{{--                        <div class="comment-box">--}}
{{--                            <ol id="comment_list" class="comment-list"></ol>--}}
{{--                        </div>--}}
{{--                        <!--放置页码-->--}}
{{--                        <div class="page-box" style="margin-left:-8px;">--}}
{{--                            <div id="pagination" class="digg"></div>--}}
{{--                        </div>--}}
{{--                        <div class="line10"></div>--}}
{{--                        <!--/放置页码-->--}}
{{--                        <!--用户评论--></div>--}}
                    <!--选项内容-->
                </div>
                <!--/商品介绍--></div>
            <!--页面左边-->
            <!--页面右边-->
            <div class="left211">
                <div class="sidebar-box">
                    <div class="line30"></div>
                    <h3>推荐商品</h3>
                    <div class="red-list">
                        <ul>
                            @foreach($tuijProdu as $time)
                            <li>
                                <a title="易快得 趋势分析系统" href="{{ route('product.show', $time->id) }}">
                                    <div class="img-box">
                                        <img src="{{ env('APP_URL') . '/uploads/' . $time->image }}" />
                                    </div>
                                    <span>{{ $time->title }}</span></a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="line10"></div>
                    <h3>人气排行</h3>
                    <ul class="rank-list">
                        @foreach($tuijProdu as $k=>$time)
                        <li class="active">
                            <span>{{ $time->created_at->toDateString() }}</span>
                            <i class="num">{{ $k+1 }}</i>
                            <a href="{{ route('product.show', $time->id) }}">{{ $time->title }}</a>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <!--/页面右边--></div>
    </div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="{{ asset('app/layer/layer.js') }}"></script>
    <script type="text/javascript">
        $(function() {

            // 加入购物车按钮点击事件
            $('#buyButton button').click(function(){

                // 请求加入购物车接口
                {{--axios.post('{{ route('cart.add') }}', {--}}
                axios.post('{{ route('order.store') }}', {
                    sku_id: $('input:radio[name="skus"]:checked').val() || '',
                    amount: $('#commoditySelectNum').val(),
                }).then(function (response) { // 请求成功执行此回调
                    console.log(response)
                    var no = response.data.no
                    location.href = "/order/"+no;
                    // layer.msg('添加成功' ,{icon:6},function(){
                    //
                    // });
                }, function (error) { // 请求失败执行此回调

                    if (error.response.status === 401) {
                        // http 状态码为 401 代表用户未登陆
                        layer.msg('请先登录' ,{icon:5},function(){});
                    } else if (error.response.status === 422) {
                        var parseJSON = error.response.data.errors;
                        var html = '';
                        // 循环打印错误
                        $.each(parseJSON ,function(k , v){
                            html += v +'<br>';
                        });
                        layer.msg(html ,{icon:5},function(){
                            $('#captcha').click();
                        });
                        // http 状态码为 422 代表用户输入校验失败
                    } else {
                        // 其他情况应该是系统挂了
                        layer.msg('系统错误' ,{icon:5},function(){});
                    }
                })
            });


            function backtop() {
                this.init();
            }
            backtop.prototype = {
                constructor: backtop,
                init: function() {
                    this._initBackTop();
                },
                _initBackTop: function() {
                    var $backTop = this.$backTop = $('<div class="cbbfixed">' +
                        //'<a class="cweixin cbbtn"">'+
                        //'<span class="weixin-icon"></span><div></div>'+
                        //'</a>'+
                        '<a class="gotop cbbtn">' + '<span class="up-icon"></span>' + '</a>' + '</div>');
                    $('body').append($backTop);

                    $backTop.click(function() {
                        $("html, body").animate({
                                scrollTop: 0
                            },
                            120);
                    });

                    var timmer = null;
                    $(window).bind("scroll",
                        function() {
                            var d = $(document).scrollTop(),
                                e = $(window).height();
                            0 < d ? $backTop.css("bottom", "10px") : $backTop.css("bottom", "-90px");
                            clearTimeout(timmer);
                            timmer = setTimeout(function() {
                                    clearTimeout(timmer)
                                },
                                100);
                        });
                }
            }
            var backtop = new backtop();
        })
    </script>
    <!--/Footer-->
{{--    <script type="text/javascript">document.getElementById("nav-3").className = "cur";</script>--}}


@stop


@section('scripts')
    <script>

    </script>
@stop
